import { reactive, toRefs, onMounted, provide, onActivated, onUnmounted } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import setting from '../../../settings'

export default function tableInit(props,filterRef,tableRef) {
  const data = reactive({
    tableHeight: 'auto',
    params: {},
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    total: 0, //总条数
    tableData: [] //table数据
  })


  onMounted(() => {
    // 是否初始化表格
    initHeight()
    if (props.init) {
      getData()
    }
  })

  onActivated(() =>{
    initHeight()
  })

  onUnmounted(() =>{
    window.onresize = null
  })

  // 初始化表格高度
  const initHeight=() =>{
    setTimeout(()=>{
      setTableHeight()
    },0)
    window.onresize = () => {
      setTableHeight()
    }
  }


  // 动态设置表格高度
  const setTableHeight = () =>{
   let clientHeight = document.documentElement.clientHeight // 页面高
   let filterHeight =  filterRef.value.clientHeight // 过滤器高
    let topNavbarHeight = setting.showTopNavbar ? 50 : 0 // 顶部菜单栏高
    let toolbarHeight = props.showToolbar? 33 : 0 // 工具栏高
    let paginationHeight = 52 // 分页器高
    let appMainPadding = 20 // 主体边距
    let otherHeight = props.otherHeight // 用来补足或去除的高
    if(props.height === 'auto'){ // 表格内容自适应模式
      data.tableHeight = ''
    }else if(props.height === 'adaptive') { // 自适应屏幕高度模式
      data.tableHeight = clientHeight - filterHeight - topNavbarHeight - paginationHeight -appMainPadding - toolbarHeight + otherHeight
    }else {// 固定高度模式
      data.tableHeight = props.height
    }
  }


  // 初始化筛选条件
  const initParams = (params) =>{
    data.currentPage = 1
    data.params = params
    getData()
  }

  const doLayout = () => {
    tableRef.value.doLayout()
  }
  // 可用于重置按钮
  const init = async () => {
    data.tableData = []
    data.pageSize = 10
    data.pageIndex = 1
    await nextTick()
    getData()
    tableRef.value.doLayout()
  }


  //加载条数切换
  const handleSizeChange = (e) => {
    data.pageSize = e
    getData()
  }

  //页码切换
  const handleCurrentChange = (e) => {
    data.pageIndex = e
    getData()
  }


  //获取表格数据
  const getData = (callback) => {
    if(!props.url){
      ElMessage({
        message: '表格缺少URL参数',
        type: 'warning',
        duration:1000
      })
      return
    }
    return new Promise((resolve, reject) => {
      let params = {
          ...data.params
        },
        axios_config = {
          url: props.url,
          method: props.method
        }
      params[props.pageIndexName] = data.currentPage
      params[props.pageSizeName] = data.pageSize
      axios_config[props.method==='get'? 'params': 'data'] = params
      request(axios_config)
        .then(async (res) => {
          let d = res.data
          data.total = +d.total
          data.tableData = d[props.structure]
          resolve(d)
        })
        .catch((err) => {
          reject('数据获取失败')
        }).finally(() =>{

      })
    })
  }

  // 发布getData方法给filter组件订阅使用
  provide('initParams', initParams)


  return {
    ...toRefs(data),
    init,
    getData,
    handleSizeChange,
    handleCurrentChange,
    doLayout
  }
}
